import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Link } from 'react-router';

import * as Util from '../../common/Util';

import {
  Input,
  Button
} from 'react-bootstrap';

import * as Shell from '../../common/Shell';
import * as FindPwdActions from '../../actions/FindPwdActions';
import Notify from '../../common/Notification';
import Container from '../../components/Container';

class FindPwdApp3 extends React.Component {

  constructor () {
    super();   
  }

  static propTypes = {
    dispatch: React.PropTypes.func.isRequired
  }

  handleSubmitClick() {
    
    let password = this.refs.password.getValue();
    if(!Util.passwordValidate(password)){
      Notify.makeNotify("密码格式不正确");
      return;
    }

    let repassword = this.refs.repassword.getValue();
    if(!Util.passwordValidate(repassword)){
      Notify.makeNotify("确认密码格式不正确");
      return;
    }

    if (repassword !== password) {
       Notify.makeNotify("两次输入密码不匹配");
      return; 
    }

    password = Util.RSAEncrypt(password);

    let { phone, captcha } = this.props.findpwd;

    let findPwdData = {
      phone,
      captcha,
      password
    };

    this.props.findpwdAction.findpwd2(findPwdData);
  }

  redirectToPage(pageName){
    //作一个延迟的时间控制
    let timer = setTimeout(function(){
      clearTimeout(timer);
      this.props.history.pushState(null, pageName);
    }.bind(this), 2000);
  }

  componentDidUpdate(){

    let { findpwd2_status = 0, message = "", phone = "", password = "" } = this.props.findpwd;

    if(findpwd2_status === -1){
      Notify.makeNotify(message);
    }else if(findpwd2_status === 1){
      Notify.makeNotify("密码找回成功",2);

      //找回密码成功，跳转到登录
      this.redirectToPage("/Login");
    }
  }


  render() {

    let { findpwd } = this.props;

    return (
        <Container  
          isGoBack={true} 
          isFooter={false}
          isHeader={true} 
          isAuth = {false}
          headerTitle={"找回密码"}>
            <div id="account-panel">
                <form className="form-horizontal">
                  <div className="text-center padding-lg">
                    <p className="lead text-primary">
                      { findpwd.phone }
                    </p>
                  </div>
                  <div className="form-element">
                    <Input type="password" 
                      ref = "password"
                      defaultValue = ""
                      placeholder = "6-16位数字、字母"
                      maxLength = "16"
                      wrapperClassName="col-xs-12" 
                      addonBefore="密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码"/>
                    
                    <div className="devider"></div>

                    <Input type="password" 
                      ref = "repassword"
                      defaultValue=""
                      placeholder = "请再次输入密码" 
                      maxLength = "16"
                      wrapperClassName="col-xs-12"
                      addonBefore="确认密码"/>
                  </div>

                  <div className="text-center padding-left-lg padding-right-lg">
                    <Button bsStyle="primary" block onClick={this.handleSubmitClick.bind(this)}>确认</Button>  
                  </div>

                </form>
            </div>
        </Container>
    );
  }
}

export default connect(state => ({
    findpwd : state.findpwd
}), dispatch => ({
    findpwdAction: bindActionCreators(FindPwdActions, dispatch)
}))(FindPwdApp3);

